<template>
	<h2 style="-webkit-app-region: drag;padding: 0 12px;">
		可拖动区域,无边框模式下生效,对应鼠标事件将由系统托管
		<el-tag type="info" style="-webkit-app-region: no-drag;">
			不可拖动区域
		</el-tag>
	</h2>
	<div class="example">
		<fieldset>
			<legend style="display: flex;align-items: center;">
				<ElButton @click="ping" type="primary">ping</ElButton>
				<ElButton type="primary" @click="setTitle">设置标题</ElButton>
			</legend>
			<PropEmit />
			<WatchSyntax />
			<VModel />
			<ExampleProvide />
			<div style="display: flex;">
				<ComposableFunction />
				<StateManagement />
			</div>
			<div style="display: flex;">
				<SlotVue />
				<CustomDirective />
			</div>
			<KeepCache />
			<PiniaStore />
			<div style="display: flex;">
				<VueRouter />
				<AsyncComponents />
			</div>
			<PathProcess />
			<RareSyntax style="color:red" id="rareSyntax">
				<ElText>打印this</ElText>
			</RareSyntax>
		</fieldset>
	</div>
</template>
<script setup lang="ts">
	import PropEmit from '@/views/example/prop-emit/FatherComponent.vue';
	import WatchSyntax from '@/views/example/watch-syntax/WatchSyntax.vue';
	import VModel from '@/views/example/v-model/FatherModel.vue';
	import ExampleProvide from '@/views/example/provide-inject/ProvideModule.vue';
	import ComposableFunction from '@/views/example/composable-function/ComposableFunction.vue';
	import KeepCache from '@/views/example/keep-alive/KeepAlive.vue';
	import CustomDirective from '@/views/example/custom-directive/CustomDirective.vue';
	import SlotVue from '@/views/example/slot-demo/SlotContent.vue';
	import StateManagement from '@/views/example/state-management/StateManagement.vue';
	import VueRouter from '@/views/example/vue-router/VueRouter.vue';
	import PiniaStore from '@/views/example/pinia-store/PiniaStore.vue';
	import AsyncComponents from '@/views/example/async-components/AsyncComponents.vue';
	import PathProcess from '@/views/example/assets-process/AssetsProcess.vue';
	import RareSyntax from '@/views/example/rare-syntax/RareSyntax.vue';
	import { ElMessageBox, ElTag, ElButton, ElText } from 'element-plus';

	const ping = async () => {
		if (window.electronAPI && window.electronAPI.ping) {
			let data = await window.electronAPI.ping();
			alert(data);
		}
	};

	const setTitle = async () => {
		const { value } = await ElMessageBox.prompt('', 'Please input title', {
			confirmButtonText: 'OK',
			cancelButtonText: 'Cancel',
		});
		if (window.electronAPI && window.electronAPI.setTitle) {
			window.electronAPI.setTitle(value);
		} else {
			document.title = value;
		}
	};

</script>
<style scoped>
	.example {
		width: 1000px;
		padding: 12px;
	}

	.example fieldset {
		padding: 8px;
	}
</style>